<template>
  <div class="imgs">
    <ul>
      <li class="item" v-for="(image, index) in imageList" :key="index" :style="{
        'background-image': 'url(' + image + ')'
      }">
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">

const imageList = [
  "https://lwdw.oss-cn-beijing.aliyuncs.com/yande.re%20527476.png",
  "https://lwdw.oss-cn-beijing.aliyuncs.com/%28pid-19050643%29%E3%81%BF%E3%81%93%E3%81%8F%E3%82%8D%E3%81%95%E3%82%932%20%E4%BB%95%E4%B8%8A%E3%81%92%20%E3%80%90%E5%A1%97%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%91.png",
  "https://lwdw.oss-cn-beijing.aliyuncs.com/%28pid-56652667%29%E3%81%8A%E8%AA%95%E7%94%9F%E6%97%A5%E3%81%8A%E3%82%81%E3%81%A7%E3%81%A8%E3%81%86.png",
  "https://lwdw.oss-cn-beijing.aliyuncs.com/%28pid-73958557%29%E3%83%A1%E3%82%A4%E3%83%89%E6%9C%8D%E5%A4%A7%E6%B2%B3%E3%81%A8%E9%BB%92%E5%AD%90.png",
  "https://lwdw.oss-cn-beijing.aliyuncs.com/%28pid-55489787%29%E3%81%AD%E3%81%93%E3%81%AE%E6%97%A5.png",
]
</script>

<style lang="scss" scoped>

.imgs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -9;
  background-color: #363636;
  overflow: hidden;

  .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50% / cover;
    opacity: 0;
    // 一张图片 6s
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    &:nth-child(2) {
      animation-delay: 6s;
    }

    &:nth-child(3) {
      animation-delay: 12s;
    }

    &:nth-child(4) {
      animation-delay: 18s;
    }

    &:nth-child(5) {
      animation-delay: 24s;
    }

    &:nth-child(6) {
      animation-delay: 30s;
    }
  }

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    transition: all .2s ease-in-out 0s;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    transform: scale(1.1);
  }

  25% {
    opacity: 0;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }
}
</style>